<html>

<head>
  <title>Angular 2 QuickStart</title>
  <link rel="stylesheet" href="sanmina-ui/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="sanmina-ui/css.css">
  <link rel="stylesheet" type="text/css" href="sanmina-ui/jquery-ui.css">
  <!-- <link rel="stylesheet" type="text/css" href="sanmina-ui/jquery.dataTables.min.css"> -->
  <style>
    #draggable { width: 150px; height: 150px; padding: 0.5em; }
    .ui-widget-header { padding: 0.2em !important;}
    .ui-menu { position: absolute; width: 100px; }
    .draggable{
    }
    .dropitem{
      font-weight:bold;
      padding:6px 0 0 0; 
      text-align:center;
      color:#D8D8D8;
      border: 1px dashed;

      width:100px; 
      height:30px; 
      margin: 0 50px 0 0px; 
      position:absolute;

    }
    .passLoc{
      font-weight:bold;
      padding:6px 0 0 0; 
      text-align:center;
      color:#D8D8D8;
      border: 1px dashed green;
      width:100px; 
      height:30px; 
      margin: 0 50px 0 0px; 
      position:absolute;
      display: inline;
    }
    .failLoc{
      font-weight:bold; 
      padding:6px 0 0 0;
      text-align:center;
      color:#D8D8D8;
      border: 1px dashed red;
      width:100px; 
      height:30px; 
      position:absolute;
      display: inline;
    }
    .fromLoc{
      font-weight:bold;
      padding:6px 0 0 0; 
      text-align:center;
      color:#D8D8D8;
      border: 1px dashed blue;
      width:100px; 
      height:30px; 
      left:400px; 
      position:absolute;
    }
    .step{
      border-radius:20px;
      font-weight: bold;
      margin:2 0 0 0; 
      padding:5px 0 0 0; 
      text-align:center;
      width:25;
      height:25;
      background-color:#74A2F3; 
      color: white;
      left:50px;

      position:absolute;
    }
    .boderChange{
      border:1 solid ;
    }
  </style>

</head>

<body id="routeId">
  <route><span class="ion-loading" style="position:center; font-size:50px;"></span></route>
  <!-- <input type="checkbox" name="" value="" upC> -->
</body>

</html>
<script type="text/javascript" src="sanmina-ui/jquery.min.js"></script>
<script type="text/javascript" src="sanmina-ui/jquery-ui.js"></script>
<script type="text/javascript" src="sanmina-ui/bootstrap.min.js"></script>
<script src="node_modules/underscore/underscore.js"></script>
 <!-- <script src="sanmina-ui/js/tablesaw-dialog.js"></script>
 <script src="sanmina-ui/js/tablesaw.js"></script>
 
 
 <script src="sanmina-ui/js/jquery.ba-resize.js"></script>
 
 <script src="sanmina-ui/js/jquery.ui.widget.js"></script>
 <script src="sanmina-ui/js/jquery.dataTables.min.js"></script>
 <script src="sanmina-ui/js/dataTables.responsive.min.js"></script>
 <script src="sanmina-ui/js/dataTables.tableTools.js"></script>
 <script src="sanmina-ui/js/dataTables.bootstrap.js"></script>
 <script src="sanmina-ui/js/sanm-sliding-drawer.js"></script>
 <script src="sanmina-ui/js/sanm-navigation.js"></script>
-->

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>

<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/rxjs/bundles/Rx.min.js"></script>

<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
<!-- 2. Configure SystemJS -->

<script>
  System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
      moment: 'node_modules/moment/moment.js',
      "@angular/core": "node_modules/@angular/core/core.umd.js",
      "@angular/common": "node_modules/@angular/common/common.umd.js",
      "@angular/compiler": "node_modules/@angular/compiler/compiler.umd.js",
      "@angular/http": "node_modules/@angular/http/http.umd.js",
      "@angular/router": "node_modules/@angular/router/router.umd.js",
      "@angular/platform-browser": "node_modules/@angular/platform-browser/platform-browser.umd.js",
      "@angular/platform-browser-dynamic": "node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js",
        // ng2-bootstrap specifics
        "@angular/core/src/facade/lang": "node_modules/@angular/core/src/facade/lang.js",

        
//        "@angular/platform-browser/src/animate/animation_builder": "node_modules/@angular/platform-browser/src/animate/animation_builder.js"
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
<script>

 $(document).ready(function() {

   setTimeout(function(){

    $( ".draggable" ).mouseover(function(event) {
      $( ".draggable" ).draggable({
        // revert: true ,
        opacity:  0.7,
        helper: function(event){
          var inner  =event.currentTarget.childNodes[0].innerHTML
          console.log(event.currentTarget.childNodes[0].className);
          return $( "<div class='ui-widget-header'>"+inner+"</div>" );
        },
        containment: "window",
        appendTo: ".navbar-static-top",
        scroll: true,
        refreshPositions :true
      });
    });

    $(".pager").click(function(event) {
      $( ".draggable" ).draggable({ 
        // revert: true ,
        opacity: 0.7,
        containment: "window",
        appendTo: ".navbar-static-top",
        helper: function(event){
          var inner  =event.currentTarget.childNodes[0].innerHTML;
          console.log(event.currentTarget.childNodes[0]);
          return $( "<div class='ui-widget-header'>"+inner+"</div>" );
          // return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
        },
      });
    });

    /*$(".droppable").droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function( event, ui ) {
       
        $( this ).find( "div" )[0].innerHTML=ui.draggable.text();
        $( this ).find( "span" )[0].className =ui.draggable[0].childNodes[0].className;

        var borderColor =$(this).css('borderColor');
        if(borderColor=='rgb(0, 128, 0)') {
          borderColor='green';
        }else if(borderColor=='rgb(255, 0, 0)'){
          borderColor='red';
        }else{
          borderColor='blue';
        }
        
        $(this).css({
          borderColor:borderColor,
          borderStyle:'solid',
          color:'black'
        });
      }
    }).sortable({
      items: "li:not(.placeholder)",
      sort: function() {
        $( this ).removeClass( "ui-state-default" );
      }
    });
*/
    

    $("#saveRouteId").click(function(event) {
      $(".droppable").droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function( event, ui ) {
       
        $( this ).find( "div" )[0].innerHTML=ui.draggable.text();
        $( this ).find( "span" )[0].className =ui.draggable[0].childNodes[0].className;
        var borderColor =$(this).css('borderColor');
        if(borderColor=='rgb(0, 128, 0)') {
          borderColor='green';
        }else if(borderColor=='rgb(255, 0, 0)'){
          borderColor='red';
        }else{
          borderColor='blue';
        }
        $(this).css({
          borderColor:borderColor,
          borderStyle:'solid',
          color:'black'
        });
      }
    }).sortable({
      items: "li:not(.placeholder)",
      sort: function() {
        $( this ).removeClass( "ui-state-default" );
      }
    });

     $('#saveRouteStepId').click(function(event) {
      var out= $('#outerDivId').children('outer-drop');
      var stepsData="";
      for (var i = 0; i < out.length; i++) {
        var drop=out[i].childNodes[1].childNodes;

        var step= out[i].getElementsByTagName('h')[0].innerHTML
        console.log(step);
        stepsData = stepsData+step+',';
        for (var j = 0; j < drop.length; j++) {
          if (drop[j].tagName=="DROP-ITEM") {
            var color = drop[j].style.borderColor;
            var dropSpanItem=drop[j].childNodes[1];
            var dropDivItem=drop[j].childNodes[3];
            var itemId=dropSpanItem.className.substring(10);
            // console.log('color:'+color+dropSpanItem.className+':'+itemId);
            if(dropDivItem.innerHTML!='Location'){
              // console.log();
              if(dropSpanItem.className.substr(0,9)=='Locations'){
                stepsData+=color+itemId+',';
              }else if(dropDivItem.innerHTML=='Sub Route'){
                stepsData+='route'+itemId+',';
              }
            }
          }
        }
        stepsData = stepsData.substring(0,stepsData.length-1);
        stepsData+=((i+1)==out.length)?'':';';
      };
      console.log(stepsData);
    });
  });

    $("#addOutDivId").click(function(event) {
      $(".droppable").droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function( event, ui ) {
       
        $( this ).find( "div" )[0].innerHTML=ui.draggable.text();
        $( this ).find( "span" )[0].className =ui.draggable[0].childNodes[0].className;
        var borderColor =$(this).css('borderColor');
        if(borderColor=='rgb(0, 128, 0)') {
          borderColor='green';
        }else if(borderColor=='rgb(255, 0, 0)'){
          borderColor='red';
        }else{
          borderColor='blue';
        }
        $(this).css({
          borderColor:borderColor,
          borderStyle:'solid',
          color:'black'
        });
      }
    }).sortable({
      items: "li:not(.placeholder)",
      sort: function() {
        $( this ).removeClass( "ui-state-default" );
      }
    });


  });

   
  },1000);


});

</script>